import React from 'react';
import './index.less';
import { history } from 'umi';
import configs from '../../../config/env';
interface LocationImageProps {
  isCity?: boolean;
  widths?: number;
  heights?: number;
  isDetail?: boolean;
  margins?: string;
  countryName: string;
  cityName?: string;
  coverImg: string | null;
  id: number;
}
const LocationImage: React.FC<LocationImageProps> = (props) => {
  const {
    isCity,
    widths,
    heights,
    margins,
    isDetail,
    countryName,
    cityName,
    coverImg,
    id,
  }: LocationImageProps = props;
  const toDetail = (cityName: string | undefined, countryName: string) => {
    if (isCity) {
      history.push('/cities-detail/' + cityName);
    } else {
      history.push('/countries-detail/' + countryName);
    }
  };
  return (
    <div
      className="image_wrapper"
      onClick={() => {
        toDetail(cityName, countryName);
      }}
      style={{
        width: widths ? widths : '',
        height: heights ? heights : '',
        margin: margins ? margins : '',
      }}
    >
      <img
        src={
          coverImg
            ? configs[process.env.API_ENV as any].API_SERVER + coverImg
            : '/images/brazil.jpg'
        }
        alt=""
      />
      <div className="mask_wrapper">
        {isCity && isDetail && (
          <>
            <div>{countryName}</div> <h4>{cityName}</h4>
          </>
        )}
        {isCity && !isDetail && (
          <>
            <div>{countryName}</div>
            <h4>{cityName}</h4>
          </>
        )}
        {!isCity && !isDetail && <h4>{countryName}</h4>}
      </div>
    </div>
  );
};
export default LocationImage;
